<template>
    <div class="shop-name">
        <figure>
            <img v-if="active_type == 0" src="@/assets/images/store/store-order-self.png" />
            <img v-else-if="active_type == 1" src="@/assets/images/store/store-tabs-spy.png" />
            <img v-else-if="active_type == 2" src="@/assets/images/store/store-tabs-etsy.png" />
            <img v-else-if="active_type == 3" src="@/assets/images/store/store-tabs-wix.png" />
            <img v-else-if="active_type == 4" src="@/assets/images/store/store-tabs-woo.png" />
            <img v-else-if="active_type == 5" src="@/assets/images/store/store-tabs-squ.png" />
        </figure>
        <span v-show="shop_name" v-text="shop_name" :title="shop_name"></span>
        <em v-if="shop_state == 2" content="Connection error" placement="top">
            <svg-icon name="user-store-unlink" />
            Connection error
        </em>
    </div>
</template>
<script>
export default {
    name: "shopIconName",
    props: ['type', 'name', 'item'],
    data () {
        return {
        }
    },
    computed: {
        active_type () {
            let type = 0;
            if (this.type) {
                type = this.type;
            } else if (this.item) {
                type = this.item.shop_type;
            };
            return type;
        },

        shop_state () {
            return this.item && this.item.shop_state ? this.item.shop_state : 0
        },

        shop_name () {
            let name = null
            if (this.name) {
                name = this.name
            } else if (this.item) {
                name = this.item.shop_name_text || this.item.shop_name;
            }
            return name
        }
    },
    methods: {},
    created () { }
}
</script>
<style lang="scss" scoped>
.shop-name {
    display: flex;
    flex-direction: row;
    align-items: center;
    color: #000000;
    font-size: 14px;
    font-family: Roboto-Regular, Roboto;
    font-weight: 400;
    overflow: hidden;
    & > figure {
        margin-right: 4px;
        width: 20px;
        min-width: 20px;
        height: 20px;
        & > img {
            width: 100%;
            height: 100%;
        }
    }

    & > span {
        flex: 1;
        line-height: 16px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }
    & > em {
        display: none;
        margin-left: 4px;
        height: 20px;
        background: rgba(159, 26, 29, 0.1);
        border-radius: 10px;
        align-items: center;
        padding: 2px 8px 2px 2px;
        svg {
            margin-right: 2px;
            width: 16px;
            height: 16px;
            color: #fff;
        }
    }
}
</style>
